<template>
    <van-dialog v-model="playTourSwitch" :title="$t('circle281')" show-cancel-button confirmButtonColor="#075ebb" @confirm="sureSelect"
        :confirmButtonText="$t('mall_10')"
        :cancelButtonText="$t('circle_kg_13')">
       <div class="content-container">
           <span>{{$t('circle293',{'value':data.localIntegral})}}</span>
           <!--<span >{{$t('circle289',{'value':data.integral})}}</span>-->
           <span>{{$t('exceptional')}}:</span>
           <div class="button-container">
               <template v-for="(item,index) in integralNum">
                    <van-button type="default" :disabled="item > data.localIntegral"
                    class="contents-box" :class="[selectedIndex === index ? 'active': '']"
                    :key="index" @click="selected(item,index)">{{item}}
                    </van-button>
               </template>
           </div>
       </div>
    </van-dialog>
</template>

<script>
import {Dialog, Button} from 'vant';

export default {
    name: 'PlayTour',
    components: {
        'van-dialog': Dialog.Component,
        [Button.name]: Button
    },
    data() {
        return {
            playTourSwitch: false,
            integralNum: [
                10, 20, 50, 100
            ],
            selectedIntegral: 0,
            selectedIndex: -1
        };
    },
    props: {
        data: {
            type: Object,
            default: () => {}
        }
    },
    methods: {
        openPlayTour() {
            this.playTourSwitch = true;
        },
        selected(num, index) {
            /* if (this.selectedIndex === index) {
                this.selectedIndex = -1;
                this.selectedIntegral = 0;
            } else {
                this.selectedIndex = index;
                this.selectedIntegral = num;
            } */
            this.selectedIndex = index;
            this.selectedIntegral = num;
            this.data.integral = num;
        },
        sureSelect() {
            if (this.data.localIntegral < this.selectedIntegral) {
                Dialog.alert({
                    width: '180px',
                    confirmButtonText: this.$t('mall_10'),
                    confirmButtonColor: '#00aeef',
                    title: this.$t('integral_tip')
                });
                return;
            } else if (this.selectedIntegral === 0) {
                Dialog.alert({
                    width: '180px',
                    confirmButtonText: this.$t('mall_10'),
                    confirmButtonColor: '#00aeef',
                    title: this.$t('circle291')
                });
                return;
            }
            this.sendPlayTour();
        },
        //发送打赏积分
        sendPlayTour() {
            this.$axios({
                method: 'POST',
                url: '/app/api/points/bill/save',
                data: this.data
            }).then(() => {
                this.selectedIntegral = 0;
                this.selectedIndex = -1;
                this.$emit('playTourSuccessful', this.selectedIntegral);
            }).catch(err => {
                Dialog.alert({
                    width: '180px',
                    confirmButtonText: this.$t('mall_10'),
                    confirmButtonColor: '#00aeef',
                    title: err.response.data.errMsg
                });
            });
        }
    }
};
</script>

<style scoped lang="less">
  /deep/.van-dialog__header{
    padding: 0;
    padding-top: 10px;
    font-weight: bold;
  }
 .content-container{
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 10px 0;
   >span{
     padding: 5px 0;
   }
   .button-container{
     display: flex;
     justify-content: space-around;
     height: 10%;
     .contents-box{
       padding: 10px;
       border-radius: 5px;
       border: 1px #ccc solid;
     }
     .active{
       background-color: #075ebb;
       color: #fff;
     }
   }
 }
 /deep/.van-dialog__content {
    padding: 0;
 }
</style>
